<template>
  <div class="config-panel">
    <h3 class="mb-[10px]">{{ props.index+1 }}号图片配置</h3>
    <el-form>
      <!-- <el-form-item label="图片链接">
        <el-input v-model="form.pics" placeholder="输入图片链接" />
      </el-form-item> -->
      <el-form-item label="海报图" prop="banner_url">
					<div class="w-80">
						<div>
							<material-picker v-model="form.pics" :limit="1" @change="onChange_img" />
						</div>
						<div class="form-tips">建议尺寸：宽度750px</div>
					</div>
				</el-form-item>
      <el-form-item label="跳转类型">
        <el-select class="w-[280px]" v-model="form.link_type" clearable @change="onChange_selete">
          <el-option label="不跳转" :value="0" />
          <el-option label="H5" :value="1" />
          <el-option label="App内部页" :value="2" />
          <el-option label="外部H5链接" :value="3" />
          <el-option label="App内打开小程序" :value="4" />
        </el-select>
      </el-form-item>
      <el-form-item label="跳转链接">
        <el-input v-model="form.link" placeholder="输入跳转链接" clearable @input="onInput" />
      </el-form-item>
      <div class="tip">跳转链接地址请联系开发人员获取</div>
      <!-- <el-form-item label="圆角">
        <el-slider v-model="form.styles.borderRadius" :max="50" />
      </el-form-item>
      <el-form-item label="内边距">
        <el-slider v-model="form.styles.padding" :max="50" />
      </el-form-item> -->
      <div class="center">
        <el-button class="w-[180px]" type="primary" @click="save">确认配置</el-button>
        <el-button class="w-[180px]" type="danger" @click="onDelete">删除</el-button>
      </div>
    </el-form>
  </div>
</template>

<script lang="ts" setup>
import { reactive, watch } from 'vue';
import { defineProps, defineEmits } from 'vue';

const props = defineProps({
  data: {
    type: Object as any,
    required: true
  },
  index: {
    type: Number || String,
    required: true
  },
});

const emit = defineEmits(['save', 'delete']);

const form:any = reactive({
  ...props.data,
  styles: props.data.styles || { borderRadius: 0, padding: 0 } // 确保 styles 被初始化
});

watch(
  () => props.data,
  (newValue) => {
    form.pics = '';
    form.link ='';
    form.link_type = '';
    // form.styles = { borderRadius: 0, padding: 0 }; // 确保 styles 被初始化

    form.pics = newValue.pics;
    form.link = newValue.link;
    form.link_type =  newValue.link_type;
    // form.styles = newValue.styles || { borderRadius: 0, padding: 0 }; // 确保 styles 被初始化
  },
  { deep: true }
);

const onChange_img = (val:any) => {
  console.log(val)
  emit('save', JSON.parse(JSON.stringify(form)));
}
const onInput = (val:any) => {
  console.log(val)
  emit('save', JSON.parse(JSON.stringify(form)));
}
const onChange_selete = (val:any) => {
  console.log(val)
  emit('save', JSON.parse(JSON.stringify(form)));
}

const save = () => {
  emit('save', JSON.parse(JSON.stringify(form)));
};
const onDelete = () => {
  emit('delete', props.index);
};

</script>

<style lang="scss" scoped>
.config-panel {
  width: 100%;
  padding: 15px;
}
.tip{
  color: var(--el-color-primary);
  margin-bottom: 20px;
}
.center{
  display: flex;
  justify-content: center;
}
</style>
